<template>
    <div class="template" style="background-color: #303030;align-items: center;display: flex;flex-direction: column;">
        <div class="makeTop" style="z-index: 9;">
            <img :src="back" @click="router.back()" style="width: 40px;height: 40px;"/>
            <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">Store</div>
            <div class="lookNum">
                <img :src="coins" style="width: 40px;height: 40px;margin-left: -10px;margin-right: 2px;"/>
                {{ coinsNum }}
            </div>
        </div>
        <img :src="storeTop"  class="storeTop"/>
        <div class="buyList">
            <div v-for="(item, index) in buyList" :key="index" class="buyItem" @click="buyItem(index)">
                <img :src="coins" style="width: 60px;height: 60px;margin-top: 10px;"/>
                <div class="num">×{{ item.num }} coins</div>
                <div class="money">
                    <img :src="buy" style="width: 100%;height: 100%;"/>
                    <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">${{ item.money }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { showToast, showLoadingToast, closeToast } from 'vant';
import buy from '../assets/buy.png'
import back from '../assets/back.png'
import coins from '../assets/coins.png'
import storeTop from '../assets/storeTop.png'
import { useRouter } from 'vue-router';
import {Base64} from 'js-base64'
import { onMounted, ref } from 'vue';
const router = useRouter()
let buyList = [{num: 20, money: 1.99 },{num: 50, money: 2.99 },{num: 100, money: 4.99 },{num: 200, money: 9.99 },{num: 500, money: 14.99 },{num: 1000, money: 19.99 }]
const coinsNum = ref(0)
onMounted(() => {
    coinsNum.value = localStorage.getItem('workLicenseNum') ? Number(localStorage.getItem('workLicenseNum')) : 0
})
const buyItem = (index) => {
    showLoadingToast({
      duration: 0,
      message: 'Loading...',
      forbidClick: true,
    });
     window['iap'] = (data) => {
            let res;
            try {
                const decodedString = Base64.decode(data);
                res = JSON.parse(decodedString);
            } catch (error) {
                res = data;
            }
            if (res !== null && typeof res === 'object') {
                let num = res.productIdentifier.replace(/\D/g, '');
    			coinsNum.value = coinsNum.value + Number(num)
                localStorage.setItem('workLicenseNum', coinsNum.value)
    			closeToast()
            } else {
                closeToast()
                showToast('Payment failed!');
            }
            return 0;
    }
    window['send'](`terms://buy?product=com.license.work.${buyList[index].num}coins&num=1`);
}
</script>

<style scoped>
.makeTop {
    width: 375px;
    height: 13vh;
    border-radius: 0px 0px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    font-family: RubikBlack;
    font-weight: 900;
    font-size: 30px;
    color: #FFFED2;
    position: absolute;
    margin-top: 20px;
    box-sizing: border-box;
}
.lookNum {
    display: flex;
    align-items: center;
    padding: 0 5px;
    box-sizing: border-box;
    height: 36px;
    background: #FFDE17;
    border-radius: 8px 8px 8px 8px;
    border: 3px solid #231F20;
    font-weight: 900;
    font-size: 20px;
    color: #231F20;
}
.storeTop {
    height: 38vh;
}
.buyList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 10px;
}
.buyItem {
    width: 112px;
    height: 136px;
    background: #FFFFFF;
    border-radius: 20px 20px 20px 20px;
    border: 2px solid #000000;
    margin-bottom: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.num {
    margin-top: 10px;
    font-weight: bold;
    font-size: 17px;
    color: #8D6CFA;
}
.money {
    position: absolute;
    bottom: -15px;
    font-weight: 900;
    font-size: 16px;
    color: #303030;
    width: 85px;
    height: 31px;
}
</style>